<style>

    .table-header{
        display: inline;
    }
    .table-header._hidden{
        position: fixed;
        top: 90px;
        width: calc(100% - 240px);
        right: 0;
        z-index: 999;
        background-color: #f8f8f8;
        padding: 20px 0;

    }

    .table-header .table-header-content{
        display: -webkit-flex;
        display: flex;
    }
    .table-header .table-header-left{
        display: -webkit-flex;
        display: flex;
        float: left;
        padding-left: 18px;
    }
    .table-header .table-header-right{
        display: -webkit-flex;
        display: flex;
        float:right;
        padding-right: 18px;
    }
    .table-header .table-header-actions .table-header-text{
        height: 38px;
        line-height: 38px;
    }

    .list-content._hidden .list-table{
        margin-top: 180px;
    }

</style>
<form id="listFrom">
    {{--搜索--}}
    @include($searchForm, [
           'searchData' => isset($searchData) ? $searchData : [],
       ])

    {{--列表头部--}}
    <div class="table-header" id="listTableHeader">
        <div class="table-header-actions">
            <div class="table-header-left">
                {{--自定义操作部分--}}
                @include($batchActions)
            </div>


            <div class="table-header-right">
                <div class="my-1 table-page">
                    <div class=" table-header-text">每页显示数量：</div>
                </div>
                <div class="my-1 table-page">
                    <select class="custom-select mr-sm-2" id="tablePerPage" name="tablePerPage">
                        <option value="10" selected>10</option>
                        <option value="20" @if(isset($tablePerPage) && (20 == $tablePerPage)) selected @endif>20</option>
                        <option value="30" @if(isset($tablePerPage) && (30 == $tablePerPage)) selected @endif>30</option>
                        <option value="50" @if(isset($tablePerPage) && (50 == $tablePerPage)) selected @endif>50</option>
                        <option value="100" @if(isset($tablePerPage) && (100 == $tablePerPage)) selected @endif>100</option>
                    </select>
                </div>

                <div class="my-1 table-page-links table-header-content" style="margin-left: 10px;">
                    <button type="button" id="tableHeaderPageUp" class="btn btn-outline-secondary table-header-page-up"
                            @if(isset($listObject) && method_exists($listObject, 'previousPageUrl') && !empty($listObject->previousPageUrl())) page-up="{{$listObject->previousPageUrl()}}" @else disabled @endif >
                        <svg style="" width="16" height="16" class="">
                            <use xlink:href="{{com_bootstrap_icon_path()}}/bootstrap-icons.svg#chevron-compact-left" />
                        </svg>
                    </button>
                    <input type="text" name="currentPageInput" id="currentPageInput" value="@if(isset($listObject) && method_exists($listObject, 'currentPage') && !empty($listObject->currentPage())){{$listObject->currentPage()}} @else 1 @endif" style="width: 40px;text-align: center;margin:0 5px;" >
                    <div class="table-header-text" style="margin-right: 5px;">共<span id="tablePageTotal">@if(isset($listObject) && method_exists($listObject, 'lastPage') && $listObject->lastPage() > 0) {{$listObject->lastPage()}} @else 0 @endif </span>页</div>
                    <button type="button" id="tableHeaderPageDown" class="btn btn-outline-secondary table-header-page-down"
                    @if(isset($listObject) && method_exists($listObject, 'nextPageUrl') && !empty($listObject->nextPageUrl())) page-down="{{$listObject->nextPageUrl()}}" @else disabled @endif >
                        <svg style="" width="16" height="16" class="">
                            <use xlink:href="{{com_bootstrap_icon_path()}}/bootstrap-icons.svg#chevron-compact-right" />
                        </svg>
                    </button>
                </div>
            </div>

        </div>

        <div style="height: 50px;">&nbsp;</div>
    </div>
    <input type="hidden" id="listCurrentPage" value="@if(isset($listObject) && method_exists($listObject, 'currentPage') && $listObject->currentPage() > 0) {{$listObject->currentPage()}} @else 1 @endif">
    <input type="hidden" id="listLastPage" value="@if(isset($listObject) && method_exists($listObject, 'lastPage') ) {{$listObject->lastPage()}} @else 0 @endif">
    <input type="hidden" id="listTableActionsUrl" @if(isset($listTableActionsUrl)) value="{{$listTableActionsUrl}}" @else value="" @endif>
</form>


<script>
    $(document).ready(function(){
        let currentWebsite = "{{$currentWebsite}}";

        //搜索值
        function getSearchParameter(){
            let perPage = parseInt($('#tablePerPage').val());
            perPage = perPage >0 ? perPage : 20;
            let searchParameter = 'perPage=' + perPage;
            $("[name^='search']").each(function(i, el){

                let currentParameter = el.name + '=' + $(this).val();
                searchParameter  +=  '&' + currentParameter;

            });

            return searchParameter;
        }

        //搜索
        $('#searchFromButton').on('click', function(){
            window.location.href = currentWebsite + "?" + getSearchParameter();
        });
        //重置
        $('#searchResetButton').on('click', function(){
            window.location.href = currentWebsite;
        });

        //向前一页
        $('#tableHeaderPageUp').on('click', function(){

            let turnUrl = $(this).attr('page-up');
            if(turnUrl){
                window.location.href = turnUrl + '&' + getSearchParameter();
            }
        });

        //向后一页
        $('#tableHeaderPageDown').on('click', function(){
            let turnUrl = $(this).attr('page-down');
            if(turnUrl){
                window.location.href = turnUrl + '&' + getSearchParameter();
            }
        });

        //当前页显示
        $('#currentPageInput').on('change', function(){
            let currentPage = parseInt($(this).val());
            let listCurrentPage = parseInt($('#listCurrentPage').val());
            let listLastPage = parseInt($('#listLastPage').val());
            if(isNaN(currentPage) || !(currentPage > 0)){
                layer.msg('页面需要大于0的整数');
                $(this).val(listCurrentPage);
                return false;
            }

            if(currentPage == listCurrentPage){
                return false;
            }

            if(currentPage > listLastPage){
                $(this).val(listCurrentPage);
                return false;
            }

            window.location.href= currentWebsite + '?page=' + currentPage + '&' + getSearchParameter();

        });

        //改变每页显示数量
        $('#tablePerPage').on('change', function(){
            window.location.href = currentWebsite + '?' + getSearchParameter();
        });

        //全选，全不选
        $('#listCheckboxIds').on('click', function(){
            let _this = $(this);
            $('input[name="ids[]"]').prop("checked", _this.is(':checked'));

            //更新选中框数量
            listTableCheckedIds();
        });

        //多选框操作
        $('input[name="ids[]"]').on('click', function(){
            //更新选中框数量
            listTableCheckedIds();
        });

        //更新选中数量
        function listTableCheckedIds(){
            let checkedTotal = 0;

            $('input[name="ids[]"]').each(function(e){
                if($(this).is(':checked')){
                    checkedTotal += 1;
                }
            });

            $('#listTableChecked').empty().html(checkedTotal);
        }

        //批量操作
        $('#listTableActions').on('change', function(){
            if(!$('input[name="ids[]"]').is(':checked')){
                layer.msg('请选择操作的数据');
                return false;
            }

            if($('#listTableActionsUrl').val()){
                $.ajax({
                    //
                });
                // window.location.reload();
            } else {
                layer.msg('系统维护之中，暂时无法进行批量操作');
            }

        });

        //监听屏幕上下滚动
        $(document).scroll(function(){
            let scrollHeight = $(document).scrollTop();

            console.log(scrollHeight);

            //列表头部
            let scrollListHeader = $('#scrollListHeader');
            if(scrollHeight > 50){
                scrollListHeader.removeClass('_hidden').addClass('_hidden');
            } else {
                scrollListHeader.removeClass('_hidden');
            }

            //表格头部
            let listTableHeader = $('#listTableHeader');
            if(scrollHeight > 100){
                listTableHeader.removeClass('_hidden').addClass('_hidden');
                $('.main-wrapper .list-content').removeClass('_hidden').addClass('_hidden');
            } else {
                listTableHeader.removeClass('_hidden');
                $('.main-wrapper .list-content').removeClass('_hidden');
            }
        });

    });
</script>